<template>

    
    <div class="link">
        <div class="block">
            <div class="linkS">
                <ul>
                    <li>
                        <a href="https://cn.mitsubishielectric.com/zh/index.html"  target="_blank">
                            <img src="../static/images/linkS1.jpg" alt="三菱电机集团中国官网"/>
                            <p>三菱电机集团中国官网</p>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cc-link.org/en/"  target="_blank">
                            <img src="../static/images/linkS2.jpg" alt="CC-Link官方网站"/>
                            <p>CC-Link官方网站</p>
                        </a>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
        </div>
    </div>


</template>

<script>
import $ from "jquery";

export default {
  name: "link",
  data() {
    return {
      
    };
  },
  
  
};
</script>

<style scoped>
    .link{
        width: 100%;
        height: auto;
        margin: 20px 0px 15px 0px;
    }
    .linkS{
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .linkS ul{
        width: 110%;
        height: auto;
    }
    .linkS ul li{
        width: 17.35%;
        height: auto;
        float: left;
        margin-right: 1%;
        margin-top: 1%;
    }
    .linkS ul li a{
        display: block;
        width: 100%;
        height: auto;
        padding: 5px 5px;
        border:1px solid #e1e1e1;
        background: #eee;
        box-sizing: border-box;
        vertical-align: middle;
        line-height: 40px;
    }
    .linkS ul li a img{
        display: inline-block;
        width: 23%;
        height: auto;
        vertical-align: middle;
    }
    .linkS ul li a p{
        display: inline-block;
        width: 72%;
        height: auto;
        vertical-align: middle;
        margin-left: 2%;
        font-size: 14px;
        color: #999;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* 媒体查询 */
    /** max-width:1024px **/
    @media only screen and (max-width: 1023px){
        .linkS ul li{
            width: 28.95%;
            margin-right: 2%;
            margin-top: 2%;
        }
        
    }

    /** max-width:750px **/
    @media only screen and (max-width: 749px){
        .linkS ul li{
            width: 44.3%;
            margin-right: 2.3%;
            margin-top: 2.3%;
        }
        .linkS ul li a p{
            font-size: 12px;
        }
        
    }

</style>